// 1. 导入 Vue / Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// Vuex是Vue的核心插件，状态管理工具
// 2. Vue.use安装Vuex
Vue.use(Vuex)

// 3. 创建一个仓库 store
const store = new Vuex.Store({
  // state 状态，就是数据
  // 和data里数据的区别，state是公共的数据
  // 整个Vue项目的组件都能访问到，data是组件自己的数据
  state: {
    count: 101,
    msg: 'Vuex'
  },

  // mutation:存放操作数据的方法
  // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation！！！
  mutations: {
    // 所有的mutation函数，第一个参数都是state
    addOne (state) {
      state.count++
    },

    // 1. 第一个参数，state
    // 2. 第二个参数，payload 载荷，相当于就是我们传递的数据
    // payload可以是任意类型，大多情况下是一个对象

    // mutation必须是同步的！！why？Vuex要求它是同步的！，保证状态的可跟踪性

    // 注意，mutation最多只能有两个参数，如果想传多个参数过来，包装进payload中
    addNum (state, payload) {
      // console.log(payload)
      // payload.msg  如果payload是对象
      // payload.num
      state.count += payload
    },
    subNum (state, payload) {
      // state.count -= payload
      // 注意，这里我们提交的时候payload提交的是一个对象
      state.count -= payload.num
    }
  },

  // 开启严格模式，必须按着规范来，对于不规范的Vuex用法，会报错
  // 默认是不开启的，实际开发也不需要开启，这个会耗一些性能
  strict: true
})
// new VueRouter()
// Vuex 是一个对

// 4. 导出
export default store
